// Base styles
// --------------------------------------------------
  .btn{
    border-radius: 2px;
  }
// Alternate buttons
// --------------------------------------------------

  // --------------------------------------------------
    .btn-white{
      .button-variant(@btn-white-color; @btn-white-bg; @btn-white-border);
      #gradient > .vertical(@btn-white-bg, @btn-white-bg-2, 35%, 100%);
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.32);
    }
    .btn-gray{
      .button-variant(@btn-gray-color; @btn-gray-bg; @btn-gray-border);
      #gradient > .vertical(@btn-gray-bg, @btn-gray-bg-2, 0%, 100%);
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.52);
    }
    .btn-gray-dark{
      .button-variant(@btn-gray-dark-color; @btn-gray-dark-bg; @btn-gray-dark-border);
      #gradient > .vertical(@btn-gray-dark-bg, @btn-gray-dark-bg-2, 0%, 100%);
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.62);
    }
    .btn-gray-darker{
      .button-variant(@btn-gray-darker-color; @btn-gray-darker-bg; @btn-gray-darker-border);
      #gradient > .vertical(@btn-gray-darker-bg, @btn-gray-darker-bg-2, 0%, 100%);
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.62);
    }
    .btn-brown{
      .button-variant(@btn-brown-color; @btn-brown-bg; @btn-brown-border);
      #gradient > .vertical(@btn-brown-bg, @btn-brown-bg-2, 0%, 100%);
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.62);
    }
    .btn-brown-dark{
      .button-variant(@btn-brown-dark-color; @btn-brown-dark-bg; @btn-brown-dark-border);
      #gradient > .vertical(@btn-brown-dark-bg, @btn-brown-dark-bg-2, 0%, 100%);
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.62);
    }
    .btn-yellow{
      .button-variant(@btn-yellow-color; @btn-yellow-bg; @btn-yellow-border);
      #gradient > .vertical(@btn-yellow-bg, @btn-yellow-bg-2, 0%, 70%);
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.52);
    }
    .btn-orange{
      .button-variant(@btn-orange-color; @btn-orange-bg; @btn-orange-border);
      #gradient > .vertical(@btn-orange-bg, @btn-orange-bg-2, 0%, 90%);
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.52);
    }
    .btn-red-light{
      .button-variant(@btn-red-light-color; @btn-red-light-bg; @btn-red-light-border);
      #gradient > .vertical(@btn-red-light-bg, @btn-red-light-bg-2, 0%, 90%);
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.82);
    }
    .btn-red{
      .button-variant(@btn-red-color; @btn-red-bg; @btn-red-border);
      #gradient > .vertical(@btn-red-bg, @btn-red-bg-2, 0%, 90%);
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.82);
    }
    .btn-pink-light{
      .button-variant(@btn-pink-light-color; @btn-pink-light-bg; @btn-pink-light-border);
      #gradient > .vertical(@btn-pink-light-bg, @btn-pink-light-bg-2, 0%, 100%);
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.62);
    }
    .btn-pink{
      .button-variant(@btn-pink-color; @btn-pink-bg; @btn-pink-border);
      #gradient > .vertical(@btn-pink-bg, @btn-pink-bg-2, 0%, 100%);
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.62);
    }
    .btn-magenta{
      .button-variant(@btn-magenta-color; @btn-magenta-bg; @btn-magenta-border);
      #gradient > .vertical(@btn-magenta-bg, @btn-magenta-bg-2, 20%, 100%);
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.62);
    }
    .btn-purple{
      .button-variant(@btn-purple-color; @btn-purple-bg; @btn-purple-border);
      #gradient > .vertical(@btn-purple-bg, @btn-purple-bg-2, 20%, 100%);
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.62);
    }
    .btn-green-light{
      .button-variant(@btn-green-light-color; @btn-green-light-bg; @btn-green-light-border);
      #gradient > .vertical(@btn-green-light-bg, @btn-green-light-bg-2, 0%, 100%);
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.62);
    }
    .btn-green{
      .button-variant(@btn-green-color; @btn-green-bg; @btn-green-border);
      #gradient > .vertical(@btn-green-bg, @btn-green-bg-2, 0%, 100%);
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.62);
    }
    .btn-aqua{
      .button-variant(@btn-aqua-color; @btn-aqua-bg; @btn-aqua-border);
      #gradient > .vertical(@btn-aqua-bg, @btn-aqua-bg-2, 0%, 100%);
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.62);
    }
    .btn-turquoise{
      .button-variant(@btn-turquoise-color; @btn-turquoise-bg; @btn-turquoise-border);
      #gradient > .vertical(@btn-turquoise-bg, @btn-turquoise-bg-2, 0%, 100%);
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.62);
    }
    .btn-blue-light{
      .button-variant(@btn-blue-light-color; @btn-blue-light-bg; @btn-blue-light-border);
      #gradient > .vertical(@btn-blue-light-bg, @btn-blue-light-bg-2, 0%, 100%);
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.62);
    }
    .btn-blue{
      .button-variant(@btn-blue-color; @btn-blue-bg; @btn-blue-border);
      #gradient > .vertical(@btn-blue-bg, @btn-blue-bg-2, 0%, 100%);
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.62);
    }